<template>
  <transition name="move">
    <div v-if="show" class="outline gap-col-8">
      <div class="font-size-12 font-style-normal font-weight-400 line-height-120 text-white">
        {{ $t('document.cookie.line1') }}
        <button @click="openCookiePolicy()">
          <span class="font-size-12 font-style-normal font-weight-500 line-height-120 text-primary">
            {{ $t('document.cookie.line2') }}
          </span>
        </button>
        <span v-if="locale !== 'en'">{{ $t('document.cookie.line3') }}</span>
      </div>
      <button
        class="confirm gap-col-10 text-white text-center font-size-14 font-style-normal font-weight-500 line-height-140"
        @click="confirmAgreement"
      >
        {{ $t('common.cookie') }}
      </button>
    </div>
  </transition>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useLocalStorage, whenever } from '@vueuse/core'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t, locale } from '@/i18n'
import { useAdultChecked } from '@/compositions/utils/adultChecked'
import { LOCAL_STORAGE_KEYS, POPUP_DIALOG_TYPE } from '@/constant'

const cookieAgreement = useLocalStorage(LOCAL_STORAGE_KEYS.COOKIE_AGREEMENT, false)
const { adultChecked } = useAdultChecked()
const delayStatus = ref(false)

const show = computed(() => !cookieAgreement.value && adultChecked.value && delayStatus.value)
whenever(adultChecked, () => setTimeout(() => (delayStatus.value = true), 5000))

const { $popupDialog } = usePopupDialogStore()

const openCookiePolicy = () => {
  $popupDialog(POPUP_DIALOG_TYPE.COOKIE_POLICY, {
    title: $t('title.cp'),
    confirm: () => {},
  }).open()
}

function confirmAgreement() {
  cookieAgreement.value = true
  window.clarity('consent')
}
</script>
<style scoped lang="scss">
.outline {
  display: flex;
  width: 100%;
  padding: 1rem 1rem;
  flex-direction: column;
  align-items: center;

  background: rgba(24, 25, 37, 0.02);
  backdrop-filter: blur(9px);

  position: absolute;
  top: 0;

  .confirm {
    display: flex;
    height: 1.875rem;
    padding: 0rem 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 1.25rem;
    background: var(--color-primary-red, #f42c52);
  }
}

.move-enter-active {
  transition: transform 0.5s ease;
}
.move-leave-active {
  transition: transform 0.5s ease;
}

.move-enter-from,
.move-leave-to {
  transform: translateY(-100%);
}
</style>
